<template>
  <div class="content">
    <div>
      <el-button size="mini" @click="detailsList">刷新</el-button>
      <el-button size="mini" type="primary" @click="toExamineFun(1)">排单确认</el-button>
      <el-button size="mini" type="warning" @click="toExamineFun(2)">取消排单</el-button>
      <el-button size="mini" type="primary" @click="handleExportDetails">导出Excel</el-button>
    </div>
    <div class="header">
      <div class="header-name">
        <search
          :options="selectData"
          :search-son="searchSon"
          :msg="tacitly"
          :sear-data1="searData1"
          @seek="collect"
          @reload="detailsList"
          @hand="detailsListHandle()"
        />
        <el-button
          type="primary"
          class="btn"
          size="mini"
          @click="detailsListHandle()"
        >
          {{ $t('btn.search') }}
        </el-button>
        <filtration
          :ftype="ftype"
          :msg="tacitly"
          :table-header="tableHeader1"
          :detail-header="detailsHeader"
          :select-data="selectData"
          @seachData="detailsListHandle"
        />
      </div>
    </div>
    <div class="table-content">
      <jc-table
        ref="table"
        v-loading="loading"
        sortable
        :table-data="detailsData"
        :table-header="detailsHeader"
        :table-height="tableHeight"
        table-selection
        get-row-keys="fentryId"
        :get-summaries="getSummaries"
        show-summary
        @selectionChange="selectionDatas"
        @clickRow="detailPurchase"
      >
        <template v-slot:billSlot="clo">
          <el-link
            type="primary"
            @click="detailPurchase(clo.scope.row.fid)"
          >
            {{ clo.scope.row.fbillNo }}
          </el-link>
        </template>
        <!--    关闭状态    -->
        <template v-slot:tagSlot="clo">
          <el-tag v-if="clo.scope.row.fcloseStatus === 'A'">{{ $t('market.normal') }}<!--正常--></el-tag>
          <el-tag v-else-if="clo.scope.row.fcloseStatus === 'B'" type="danger">
            {{ $t('market.closed') }}<!-- 已关闭 -->
          </el-tag>
          <span v-else />
        </template>
        <!--    状态    -->
        <template v-slot:btnState="col">
          <span v-if="col.scope.row.fdocumentStatus === ''" />
          <el-tag
            v-else
            :type="col.scope.row.stateColor"
          >
            {{ col.scope.row.fdocumentStatus }}
          </el-tag>
        </template><!--物料编码-->
        <template v-slot:btnStates="col">
          <el-link
            type="primary"
            @click="jumpMateriel1(col.scope.row.fnumber)"
          >
            {{ col.scope.row.fnumber }}
          </el-link>
        </template>
        <!--    是否跑ERP    -->
        <template v-slot:text3Slot="clo">
          <el-tag v-if="clo.scope.row.fmrp === 1" type="success">{{ $t('market.yes') }}</el-tag>
          <el-tag v-else-if="clo.scope.row.fmrp === 0" type="warning">
            {{ $t('market.no') }}
          </el-tag>
        </template>
        <!--    是否排单    -->
        <template v-slot:text2Slot="clo">
          <el-tag v-if="clo.scope.row.fscheduling === 1" type="success">{{ $t('market.yes') }}</el-tag>
          <el-tag v-else-if="clo.scope.row.fscheduling === 0" type="warning">
            {{ $t('market.no') }}
          </el-tag>
        </template>
      </jc-table>
      <cardTab :tab-arr="tabArr" @search="handleQueryBomList1" />
      <!--    分页器-->
      <div class="footer">
        <jc-pagination
          :total="totalDatail"
          :page.sync="currentPageDetail"
          :limit.sync="sizeDetail"
          @pagination="detailsList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryTSalOrderScheduling, SchedulingConfirm, SchedulingCancel
} from '@/api/marketManage/marketOrder'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { toMxAmina } from '@/components/ToMxamineState'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'
import filtration from '@/components/filtration'

export default {
  name: 'MarketOrder',
  components: {
    cardTab: () => import('@/components/cardTab'),
    search,
    filtration
  },
  mixins: [searData],
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      upDownVis: false,
      cha: '',
      ftype: 6,
      activeName: 'first',
      isdanjuDialog: false, // 单据类型
      // 表头
      tableData: [], // 销售数据
      selectVal: [], // 删除销售订单数组
      fbillNoDetails: '',
      flowChart: '',
      totalDatail: 0,
      currentPageDetail: 1,
      sizeDetail: 200,
      detailsData: [],
      detailVal: '',
      detailsHeader: [
        { label: this.$t('market.orderDate'), prop: 'fdate', width: '100' },
        { label: this.$t('market.billNo'), type: 'bill', prop: 'fbillNo', width: '130' },
        { label: this.$t('market.paezText1'), prop: 'fpaezText', minWidth: '120' },
        { label: this.$t('market.cust'), prop: 'customer', width: '120' },
        { label: this.$t('market.saler'), prop: 'fsaler', width: '100' },
        { label: this.$t('shop.state'), type: 'state', prop: 'fdocumentStatus', width: '90' },
        { label: this.$t('market.closeState'), type: 'tag', prop: 'fcloseStatus', width: '100' },
        { label: this.$t('market.scheduling'), type: 'text2', prop: 'fscheduling', width: '100' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.custmatNo'), prop: 'fcustmatNo', width: '120' },
        { label: this.$t('market.fmaterial'), type: 'states', prop: 'fnumber', width: '130' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.specifica'), prop: 'fspecificaTion', width: '100' },
        { label: this.$t('market.funit'), prop: 'funit', width: '80' },
        { label: this.$t('market.fqty'), prop: 'fqty', align: 'right', width: '80' },
        { label: this.$t('market.deliveryDate'), prop: 'fdeliveryDate', width: '100' },
        { label: this.$t('market.fproducedate'), prop: 'fproducedate', width: '100' },
        { label: this.$t('market.note'), prop: 'fnote', width: '110' },
        { label: this.$t('market.foutqty'), prop: 'foutqty', width: '100', align: 'right' },
        { label: this.$t('market.fyoutqty'), prop: 'fyoutqty', width: '100', align: 'right' },
        { label: this.$t('market.paezText2'), prop: 'fpaezText2', width: '110' },
        { label: this.$t('market.ftaxRate'), prop: 'ftaxrate', width: '80' },
        { label: this.$t('market.fdescripTion'), prop: 'fdescripTion', minWidth: '200px' }
      ],
      tableHeader1: [
        { label: this.$t('market.creator'), prop: 'fcreator' },
        { label: this.$t('market.approver'), prop: 'fapprover' },
        { label: this.$t('market.createDate'), prop: 'fcreatedate' },
        { label: this.$t('market.modifier'), prop: 'fmodifier' },
        { label: this.$t('market.modifyDate'), prop: 'fmodifydate' },
        { label: this.$t('market.approveDate'), prop: 'fapprovedate' },
        { label: this.$t('market.closeor'), prop: 'fcloser' },
        { label: this.$t('market.closeyDate'), prop: 'fcreatedate' },
        { label: this.$t('market.cancelleror'), prop: 'fcanceller' },
        { label: this.$t('market.cancellerDate'), prop: 'fcanceldate' },
        { label: this.$t('market.paezText'), prop: 'fpaezText' },
        { label: this.$t('market.paezCom'), prop: 'fpaezcomboname' },
        { label: this.$t('market.gold'), prop: 'FGOLD' },
        { label: this.$t('market.recCondition'), prop: 'freccondition' },
        { label: this.$t('market.headDelivery'), prop: 'fheaddeliverywayname' },
        { label: this.$t('market.localCurr'), prop: 'flocalcurr' },
        { label: this.$t('market.exchangeRate'), prop: 'fexchangerate' },
        { label: this.$t('market.exchangeType'), prop: 'fexchangetype' },
        { label: this.$t('market.priceList'), prop: 'fpricelist' },
        { label: this.$t('market.billtaxamount'), prop: 'fbilltaxamount' },
        { label: this.$t('market.billtaxamount_lc'), prop: 'fbilltaxamount_lc' },
        { label: this.$t('market.billamount_lc'), prop: 'fbillamount_lc' },
        { label: this.$t('market.billallamount_lc'), prop: 'fbillallamount_lc' },
        { label: this.$t('market.purqty'), prop: 'fpurqty' },
        { label: this.$t('market.fmrp'), prop: 'fmrp', type: 'text3' }
      ],
      tabArr: [
        { label: '成品', name: '1-' },
        { label: '半成品', name: '2-' },
        { label: '原材料', name: '3-' }
      ],
      searData1: [],
      tableHeight: '70vh'
    }
  },
  created() {
    this.detailsList()
    this.tableHeader1 = this.detailsHeader.concat(this.tableHeader1)
    this.oldTabHeader = this.detailsHeader
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 240px)' : '70vh'
  },
  methods: {
    // 导出表格-销售订单明细列表
    handleExportDetails() {
      require.ensure([], () => {
        const tHeader = this.detailsHeader.map((res) => {
          return res.label
        })
        const filterVal = this.detailsHeader.map((res) => {
          return res.prop
        })
        if (this.detailsData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else if (this.val && this.val.length > 0) {
          const list = this.val.map(item => {
            if (item.fcloseStatus === 'A') {
              item.fcloseStatus = '正常'
            } else if (item.fcloseStatus === 'B') {
              item.fcloseStatus = '已关闭'
            }
            return toMxAmina(item)
          })
          const data = formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '销售排单列表')
        } else {
          queryTSalOrderScheduling({
            pageSize: 100000,
            pageNum: 1,
            search: this.searCollData
          }).then(res => {
            if (res.code === 0) {
              const list = res.data.array.map(item => {
                if (item.fcloseStatus === 'A') {
                  item.fcloseStatus = '正常'
                } else if (item.fcloseStatus === 'B') {
                  item.fcloseStatus = '已关闭'
                }
                return toMxAmina(item)
              })
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '销售排单列表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 销售订单明细列表
    async detailsList(ev) {
      this.loading = true
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        list: this.list,
        pageNum: this.currentPageDetail,
        pageSize: this.sizeDetail,
        search: this.searCollData.concat(this.details)
      }
      const { data: RES } = await queryTSalOrderScheduling(DATA)
      this.detailsData = RES.array.map(item => {
        return toMxAmina(item)
      })
      this.totalDatail = RES.total
      this.loading = false
    },
    detailsListHandle(ev) {
      this.currentPageDetail = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.detailsList(ev.detail)
      } else {
        this.detailsList()
      }
    },
    // 成品 原材料
    handleQueryBomList1(ev) {
      this.searCollData = []
      this.pageNum = 1
      this.searCollData = ev
      this.searchSon = ev
      this.detailsList()
    },
    // 明细列表 多选时触发的事件
    selectionDatas(val) {
      this.fentryData = []
      val.forEach(res => {
        this.fentryData.push(res.fentryId)
      })
    },
    // 订单详情
    detailPurchase(ev) {
      const id = ev.fid || ev
      this.$router.push({ path: `/schedleDetail/${id}` })
    },
    // 公共函数
    toExamineFun(ev) {
      const DATA = { EntryIds: this.fentryData }
      const api = ev === 1 ? SchedulingConfirm : SchedulingCancel
      api(DATA).then(res => {
        if (res.code === 0) {
          this.detailsList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 自定义列表
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header) {
        ev.header.forEach(item => {
          this.tableHeader1.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.detailsHeader = this.tableHeaders
      } else if (ev.fname === '缺省方案') {
        this.detailsHeader = this.oldTabHeader
      } else {
        this.detailsHeader = this.tableHeader1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  @include listBom;
    .el-table {
      overflow: visible !important;
      position: relative;
      &::v-deep .el-table__footer-wrapper {
        font-size: 13px;
        position: absolute;
        bottom: 0;
      }
    }
    .header {
      position: relative;

      .header-name {
        width: 100%;
      }

      .btn {
        transform: translateY(18%);
        margin-left: 450px !important;
      }
    }
  }

.inTheBtn {
  transform: translateY(-15px);
}

.tag-mar {
  margin-right: 3px;
  margin-bottom: 3px;
}

.tag-mar:hover {
  cursor: pointer;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
